<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Equilateral Triangle Inscribed in a Rotated Circle</title>
</head>
<body>
    <svg id="svg" width="600" height="600"></svg>

    <script>
        const width = 600;
        const height = 600;
        const centerX = width / 2;
        const centerY = height / 2;
        const circleRadius = 190; // Adjust the radius as needed
        const rotationAngle = 30; // Adjust the rotation angle in degrees

        // Calculate the coordinates of the triangle vertices
        const triangleVertices = [
            { x: centerX, y: centerY - circleRadius },
            { x: centerX - (Math.sqrt(3) / 2) * circleRadius, y: centerY + (circleRadius / 2) },
            { x: centerX + (Math.sqrt(3) / 2) * circleRadius, y: centerY + (circleRadius / 2) }
        ];

        // Create an SVG element
        const svg = document.getElementById('svg');

        // Draw the circle with rotation
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute('cx', centerX);
        circle.setAttribute('cy', centerY);
        circle.setAttribute('r', circleRadius);
        circle.setAttribute('fill', 'none'); // Set fill to none
        circle.setAttribute('stroke', 'black');
        circle.setAttribute('transform', `rotate(${rotationAngle} ${centerX} ${centerY})`); // Rotate the circle
        svg.appendChild(circle);

        // Draw the sectors
        for (let i = 0; i < 3; i++) {
            const sector = document.createElementNS("http://www.w3.org/2000/svg", "path");
            const startAngle = ((i * 2 * Math.PI) / 3) + (rotationAngle * Math.PI / 180); // Adjust for rotation
            const endAngle = (((i + 1) * 2 * Math.PI) / 3) + (rotationAngle * Math.PI / 180); // Adjust for rotation
            const sectorPath = `M ${centerX},${centerY} L ${centerX + circleRadius * Math.cos(startAngle)},${centerY + circleRadius * Math.sin(startAngle)} A ${circleRadius},${circleRadius} 0 0,1 ${centerX + circleRadius * Math.cos(endAngle)},${centerY + circleRadius * Math.sin(endAngle)} Z`;
            sector.setAttribute('d', sectorPath);
            sector.setAttribute('fill', `hsl(${i * 120}, 100%, 50%)`); // Set different colors
            sector.setAttribute('stroke', 'black');
            svg.appendChild(sector);
        }

        // Draw the equilateral triangle
        const triangle = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
        const points = triangleVertices.map(vertex => `${vertex.x},${vertex.y}`).join(' ');
        triangle.setAttribute('points', points);
        triangle.setAttribute('fill', 'yellow');
        triangle.setAttribute('stroke', 'black');
        svg.appendChild(triangle);
    </script>
</body>
</html>
